<template>
  <div class="editor-root">
    <div class="editor-tools">
      <img class="insert-emoji" src="../assets/images/insertEmoji.png" @click="emojiShow = !emojiShow" alt="插入表情">
      <img class="insert-image" src="../assets/images/insertImage.png"  alt="插入图片">
    </div>
    <transition name="el-zoom-in-bottom">
      <div class="emoji-box" v-show="emojiShow">
        <ul class="emoji-menu">
          <li v-for="temp in emoji" :class="nowEmojiName===temp.name?'checkedEmoji':'uncheckedEmoji'">
            <span @click="emojiTypeClick(temp)">{{temp.name}}</span>
          </li>
        </ul>
        <ul class="emoji-list">
          <p v-for="temp in nowEmoji.alias" @click="insertText(temp)">{{temp}}</p>
        </ul>
      </div>
    </transition>
    <div class="editor-box">
      <textarea id="editor" ref="editor" v-model="content"/>
      <button type="button" class="chatSend" @click="chatSend">Enter<br>快捷发送</button>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Editor",
      data(){
        return{
          emojiShow: false,
          emoji: {
            face: {
              name: "表情系列",
              alias: ["😄", "😃", "😀", "😊", "😉", "😍", "😘", "😚", "😗", "😙", "😜", "😝", "😛", "😳", "😁", "😔", "😌", "😒", "😞", "😣", "😢", "😂", "😭", "😪", "😥", "😰", "😅", "😓", "😩", "😫", "😨", "😱", "😠", "😡", "😤", "😖", "😆", "😋", "😷", "😎", "😴", "😵", "😲", "😟", "😦", "😧", "😈", "👿", "😮", "😬", "😐", "😕", "😯", "😶", "😇", "😏", "😑", "😺", "😸", "😻", "😽", "😼", "🙀", "😿", "😹", "😾", "👹", "👺", ],
            },
            animal: {
              name: "动物系列",
              alias: ["🐶", "🐺", "🐱", "🐭", "🐹", "🐰", "🐸", "🐯", "🐨", "🐻", "🐷", "🐽", "🐮", "🐗", "🐵", "🐒", "🐴", "🐑", "🐘", "🐼", "🐧", "🐦", "🐤", "🐥", "🐣", "🐔", "🐍", "🐢", "🐛", "🐝", "🐜", "🐞", "🐌", "🐙", "🐚", "🐠", "🐟", "🐬", "🐳", "🐋", "🐄", "🐏", "🐀", "🐃", "🐅", "🐇", "🐉", "🐎", "🐐", "🐓", "🐕", "🐖", "🐁", "🐂", "🐲", "🐡", "🐊", "🐫", "🐪", "🐆", "🐈", "🐩", "🐾", "🙈", "🙉", "🙊", "💀", "👽", "😺", "😸", "😻", "😽", "😼", "🙀", "😿", "😹", "😾", ],
            },
            fruitFood: {
              name: "水果食物",
              alias: ["☕", "🍵", "🍶", "🍼", "🍺", "🍻", "🍸", "🍹", "🍷", "🍴", "🍕", "🍔", "🍟", "🍗", "🍖", "🍝", "🍛", "🍤", "🍱", "🍣", "🍥", "🍙", "🍘", "🍚", "🍜", "🍲", "🍢", "🍡", "🍳", "🍞", "🍩", "🍮", "🍦", "🍨", "🍧", "🎂", "🍰", "🍪", "🍫", "🍬", "🍭", "🍯", "🍎", "🍏", "🍊", "🍋", "🍒", "🍇", "🍉", "🍓", "🍑", "🍈", "🍌", "🍐", "🍍", "🍠", "🍆", "🍅", "🌽", ],
            },
            plantNature: {
              name: "植物自然",
              alias: ["💐", "🌸", "🌷", "🍀", "🌹", "🌻", "🌺", "🍁", "🍃", "🍂", "🌿", "🌾", "🍄", "🌵", "🌴", "🌲", "🌳", "🌰", "🌱", "🌼", "🌐", "🌞", "🌝", "🌚", "🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘", "🌜", "🌛", "🌙", "🌍", "🌎", "🌏", "🌋", "🌌", "🌠", "⭐", "☀", "⛅", "☁", "⚡", "☔", "❄", "⛄", "🌀", "🌁", "🌈", "🌊", "🔥", "✨", "🌟", "💫", "💥", "💢", "💦", "💧", "💤", "💨", ],
            },
            zodiac: {
              name: "生肖星座",
              alias: ["🐁", "🐂", "🐅", "🐇", "🐉", "🐍", "🐎", "🐐", "🐒", "🐓", "🐕", "🐖", "♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓", ],
            },
            sports: {
              name: "运动休闲",
              alias: ["📰", "🎨", "🎬", "🎤", "🎧", "🎼", "🎵", "🎶", "🎹", "🎻", "🎷", "🎸", "👾", "🎮", "🃏", "🎴", "🀄", "🎲", "🎯", "🏈", "🏀", "⚽", "⚾", "🎾", "🎱", "🏉", "🎳", "⛳", "🚵", "🚴", "🏁", "🏇", "🏆", "🎿", "🏂", "🏊", "🏄", "🎣", ],
            },
            person: {
              name: "人物相关",
              alias: ["👂", "👀", "👃", "👅", "👄", "👍", "👎", "👌", "👊", "✊", "✌", "👋", "✋", "👐", "👆", "👇", "👉", "👈", "🙌", "🙏", "☝", "👏", "💪", "🚶", "🏃", "💃", "👫", "👪", "👬", "👭", "💏", "💑", "👯", "🙆", "🙅", "💁", "🙋", "💇", "💅", "👰", "🙎", "🙍", "🙇", "🎩", "👑", "👒", "👟", "👞", "👡", "👠", "👢", "👕", "👔", "👚", "👗", "🎽", "👖", "👘", "👙", "💼", "👜", "👝", "👛", "👓", "🎀", "🌂", "💄", "💋", "👣", "💎", "💍", ],
            },
            trick: {
              name: "花样庆祝",
              alias: ["👑", "🔥", "✨", "🌟", "💫", "💥", "🎀", "🌂", "💄", "💛", "💙", "💜", "💚", "❤", "💔", "💗", "💓", "💕", "💖", "💞", "💘", "💌", "💋", "🎍", "💝", "🎎", "🎒", "🎓", "🎏", "🎆", "🎇", "🎐", "🎑", "🎃", "👻", "🎅", "🎄", "🎁", "🎋", "🎉", "🎊", "🎈", "🎌", ],
            },
            textSeries: {
              name: "文字系列",
              alias: ["🈯", "🈳", "🈵", "🈴", "🈲", "🉐", "🈹", "🈺", "🈶", "🈚", "🚾", "🅿", "🈷", "🈸", "🈂", "Ⓜ", "🉑", "㊙", "㊗", "🆑", "🆘", "🆔", "🔞", "🚫", "🆚", "🅰", "🅱", "🆎", "🅾", "❇", ],
            },
            goods: {
              name: "物体物件",
              alias: ["🔮", "🎥", "📷", "📹", "📼", "💿", "📀", "💽", "💾", "💻", "📱", "☎", "📞", "📟", "📠", "📡", "📺", "📻", "🔊", "🔉", "🔈", "🔇", "🔔", "🔕", "📢", "📣", "⏳", "⌛", "⏰", "⌚", "🔓", "🔒", "🔐", "🔑", "🔎", "💡", "🔦", "🔆", "🔅", "🔌", "🔋", "🔍", "🛁", "🛀", "🚿", "🚽", "🔧", "🔩", "🔨", "🚪", "🚬", "💣", "🔫", "🔪", "💊", "💰", "💴", "💵", "💷", "💶", "💳", "💸", "📲", "📧", "📥", "📤", "✉", "📩", "📨", "📯", "📫", "📪", "📬", "📭", "📮", "📦", "📝", "📄", "📃", "📑", "📊", "📈", "📉", "📜", "📋", "📅", "📆", "📇", "📁", "📂", "✂", "📌", "📎", "✒", "✏", "📏", "📐", "📕", "📗", "📘", "📙", "📓", "📔", "📒", "📚", "📖", "🔖", "📛", "🔬", ],
            },
            signs: {
              name: "各种标识",
              alias: ["🚻", "🚹", "🚺", "🚼", "🚰", "🚮", "♿", "🚭", "🛂", "🛄", "🛅", "🛃", "🚫", "🔞", "🚯", "🚱", "🚳", "🚷", "🚸", "⛔", "✳", "❇", "❎", "✅", "✴", "💟", "📳", "📴", "💠", "➿", "♻", "⛎", "0⃣", "1⃣", "2⃣", "3⃣", "4⃣", "5⃣", "6⃣", "7⃣", "8⃣", "9⃣", "🔟", "⬆", "⬇", "⬅", "➡", "🔣", "🔢", "🔠", "🔡", "🔤", "↗", "↖", "↘", "↙", "↔", "↕", "🔄", "◀", "▶", "🔼", "🔽", "↩", "↪", "ℹ", "⏪", "⏫", "⏬", "⤵", "⤴", "🆗", "🔀", "🔁", "🔂", "🆕", "🆙", "🆒", "🆓", "🆖", "📶", "🎦", "🈁", "🔯", "🏧", "💹", "💲", "💱", "™", "❌", "‼", "⁉", "❗", "❓", "❕", "❔", "⭕", "🔝", "🔚", "🔙", "🔛", "🔜", "🔃", "🕛", "🕧", "🕐", "🕜", "🕑", "🕝", "🕒", "🕞", "🕓", "🕟", "🕔", "🕠", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "🕡", "🕢", "🕤", "🕥", "🕦", "➕", "➖", "➗", "♠", "♥", "♣", "♦", "💮", "💯", "✔", "☑", "🔘", "🔗", "➰", "〰", "〽", "🔱", "◼", "◻", "◾", "◽", "▪", "▫", "🔺", "🔲", "🔳", "⚫", "⚪", "🔴", "🔵", "🔻", "🔶", "🔷", "🔸", "🔹", "✖", ],
            },
            RVtraffic: {
              name: "房车交通",
              alias: ["🏠", "🏡", "🏫", "🏢", "🏣", "🏥", "🏦", "🏪", "🏩", "🏨", "💒", "⛪", "🏬", "🏤", "🌇", "🌆", "🏯", "🏰", "⛺", "🏭", "🗼", "🗾", "🗻", "🌄", "🚢", "⛵", "🚤", "🚣", "⚓", "🚀", "✈", "💺", "🚁", "🚂", "🚊", "🚉", "🚞", "🚆", "🚄", "🚅", "🚈", "🚇", "🚝", "🚋", "🚃", "🚎", "🚌", "🚍", "🚙", "🚘", "🚗", "🚕", "🚖", "🚛", "🚚", "🚨", "🚓", "🚔", "🚒", "🚑", "🚐", "🚲", "🚡", "🚟", "🚠", "🚜", "💈", "🚏", "🎫", "🚦", "🚥", "⚠", "🚧", "🔰", "⛽", "🏮", "🎰", "♨", "🗿", "🎪", "🎭", "📍", "🚩", ],
            }
          },
          nowEmoji:{
            name: "表情系列",
            alias: ["😄", "😃", "😀", "😊", "😉", "😍", "😘", "😚", "😗", "😙", "😜", "😝", "😛", "😳", "😁", "😔", "😌", "😒", "😞", "😣", "😢", "😂", "😭", "😪", "😥", "😰", "😅", "😓", "😩", "😫", "😨", "😱", "😠", "😡", "😤", "😖", "😆", "😋", "😷", "😎", "😴", "😵", "😲", "😟", "😦", "😧", "😈", "👿", "😮", "😬", "😐", "😕", "😯", "😶", "😇", "😏", "😑", "😺", "😸", "😻", "😽", "😼", "🙀", "😿", "😹", "😾", "👹", "👺", ],
        },
          nowEmojiName:'表情系列',
          content: ''
        }
      },
      methods: {
        //表情分类点击时
        emojiTypeClick(emoji){
          this.nowEmoji = emoji;
          this.nowEmojiName = emoji.name;
        },
        //插入表情 obj输入框  emoji表情
        insertText(emoji) {
          let input = this.$refs.editor;
          let startPos = input.selectionStart;  //光标开始位置
          let endPos = input.selectionEnd;      //光标结束位置
          let tmpStr = input.value;
          input.value = tmpStr.substring(0, startPos) + emoji + tmpStr.substring(endPos, tmpStr.length);
          //设置光标往后移一位
          input.setSelectionRange(startPos+2,startPos+2);
        },

        //发送信息
        chatSend(){
          let content = this.formattingParam(this.wangEditor.txt.html());
          let jsonParam = '{"chatHeadPhoto":"'+this.headPhoto+'","chatName":"'+this.chatName+'","chatContent":"'+content+'","uuid":"'+this.xlkBlogUuid+'"}';
          this.webSocket.send(jsonParam);
          this.wangEditor.txt.html('');
          setTimeout(this.scrollTopBottom,300)
        },
      },
      mounted() {
        this.$refs.editor.focus();
        //现代浏览器阻止默认事件
        document.getElementsByClassName("editor-tools")[0].onmousedown=function(e){
          //现代浏览器阻止默认事件
          if ( e && e.preventDefault )
            e.preventDefault();
          //IE阻止默认事件
          else
            window.event.returnValue = false;
          return false;
        };
        document.getElementsByClassName("emoji-box")[0].onmousedown=function(e){
          //现代浏览器阻止默认事件
          if ( e && e.preventDefault )
            e.preventDefault();
          //IE阻止默认事件
          else
            window.event.returnValue = false;
          return false;
        };

      },
      watch: {

      }
    }
</script>

<style scoped>
  ul{
    margin: 0;
  }
  .editor-root{
    margin: 200px 50px;
  }
  .editor-tools{
    padding: 5px 5px;
    border: 1px solid #dadada;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
    border-bottom: none;
  }
  .editor-tools img{
    width: 30px;
    height: 30px;
    display: inline-block; /*一定要将div设置为inline-block*/
    vertical-align: middle;/*设置该元素在父元素中的位置*/
  }
  .emoji-box{
    color: #585858;
    top: 10px;
    width: 500px;
    position: absolute;
    border: 1px solid #aeaeae;
    border-radius: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
  }
  .emoji-menu{
    margin: 5px 5px;
    padding-left: 0;
    text-align: center;
    width: 100px;
    height: 150px;
    overflow-y: auto;
    float: left;
    list-style: none;
  }
  .emoji-menu::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  .checkedEmoji{
    padding: 5px 0;
    background: #9ecb45;
    border-radius: 10px;
  }
  .uncheckedEmoji{
    padding: 5px 0;
    background: #ffffff;
  }
  .emoji-list{
    padding-left: 10px;
    justify-content: left;
    padding-top: 5px;
    height: 150px;
    background: #ffffff;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .emoji-list p{
    float: left;
    margin: 0 0;
    font-size: 20px;
    padding: 5px 5px;
  }
  .emoji-list p:hover{
    background: #bfbfbf;
  }
  .emoji-list::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  .editor-box{
    position: relative;
  }
  #editor{
    border: 1px solid #dadada;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px 5px;
    resize: none;
    height: 100px;
    width: 100%;
    outline: none;
  }
  .chatSend{
    z-index: 120;
    position: absolute;
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    background-image: -moz-linear-gradient(top, #3bbf64, #2b8045);
    background-image: -o-linear-gradient(top, #3bbf64, #2b8045);
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    font-family: fantasy;
    width: 100px;
    height: 38px;
    top: 60px;
    right: 10px;
    bottom: 100px;
    border-radius: 5px;
    border: #8e8e8e 1px solid;
  }
  .chatSend:active{
    background-image: linear-gradient(to bottom, #35ad5b, #2b8045);
    background-image: -moz-linear-gradient(top, #35ad5b, #2b8045);
    background-image: -o-linear-gradient(top, #35ad5b, #2b8045);
    background-image: linear-gradient(to bottom, #35ad5b, #2b8045);
  }

</style>
